<template>
	<div class="rightClickBox" id="rightClickBox">
		<span class="rightClickBoxSpan"></span>
		<div class="menuItem" v-for="item in menuItems" :key="item.id" @click="item.click">
			<i class="icons" :class="item.icon"></i>
			{{ item.name }}
		</div>
	</div>
</template>

<script>
	// import { editorMap } from './utils/rightEditorMap.js'
	import { cmf } from './utils/contextMenu.js'
	export default{
		data(){
			return{
				menuItems: [
					{
						id: 1,
						name: '属性',
						icon: 'el-icon-document',
						click: () =>{
							cmf.editorDocment()
							// editorMap.detectionRightClickDom()
						}
					},
					{
						id: 2,
						name: '修改路径',
						icon: 'el-icon-edit',
						click: () =>{
							cmf.modifyPath()
							// editorMap.detectionRightClickDom()
						}
					},
					{
						id: 3,
						name: '复制坐标',
						icon: 'el-icon-document-copy',
						click: () =>{
							cmf.copyLatLng()
						}
					},
					{
						id: 4,
						name: '全屏显示',
						icon: 'el-icon-files',
						click: () =>{
							cmf.fullScreen()
						}
					},
					{
						id: 5,
						name: '删除',
						icon: 'el-icon-delete',
						click: () =>{
							cmf.deleteDocment()
						}
					},
				]
			}
		},
		mounted() {
			// console.log()
			// cmf.deleteDocment()
		}
	}
</script>

<style scoped="scoped">
	.rightClickBox {
		position: fixed;
		padding: 5px 10px;
		background: #FFFFFF;
		border-radius: 5px;
		border-radius: 5px;
		left: 500px;
		top: 300px;
		display: none;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	}

	.rightClickBoxSpan {
		position: absolute;
		width: 0;
		height: 0;
		border: 5px;
		border-top: 5px solid transparent;
		border-left: 5px solid transparent;
		border-bottom: 5px solid #FFFFFF;
		border-right: 5px solid transparent;
		top: -10px;
		left: 10px;
	}

	.menuItem {
		cursor: pointer;
		line-height: 32px;
		/* width: 100px; */
		padding: 0 5px;
		text-align: left;
		color: #333333;
	}
	.icons{
		margin-right: 5px;
	}
	.menuItem:hover {
		background: rgba(36, 177, 78, 0.7);
		color: #FFFFFF;
	}
</style>
